<template>
  <div class="flex py-2 mb-4 bg-white-opacity rounded-xl">
    <div class="flex items-center justify-center flex-1">{{ c_name }}</div>
    <div class="flex-3">
      <!-- 信息 -->
      <div class="flex justify-around">
        <span>总价: {{ singleGoodtotalPrice }}</span>
        <span>数量: {{ num }}</span>
      </div>
      <!-- 修改 -->
      <div class="flex justify-around">
        <a-date-picker placeholder="送货日期" v-model:value="deliveryDate" />
        <a-input-number
          size="small"
          :min="0"
          v-model:value="num"
          @change="handleInputNumChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from "vue"
import type { GoodInfo } from "@/interface/good"
import { defineProps, toRefs, computed, toRef } from "vue"
import { useGoodsStore } from "@/store/modules/goods"
import moment from "moment"

const goodsStore = useGoodsStore()
const props = defineProps({
  goodInfo: {
    type: Object as PropType<GoodInfo>,
    default: () => ({}),
  },
})

const {
  c_price,
  c_name,
  num,
  deliveryDate: deliveryDateStr,
} = toRefs(props.goodInfo)

// ! 需要把字符串时间重新转换成类型为Moment类型
const deliveryDate = moment(deliveryDateStr.value, "YYYY-MM-DD")

const singleGoodtotalPrice = computed(() => c_price.value * num.value)

const handleInputNumChange = (val: number | string) => {
  if (val < 0 || val === "" || typeof val !== "number") {
    num.value = 1
    return
  }
  num.value = val
  goodsStore.changeListing(props.goodInfo)
}
</script>
<style scoped></style>
